<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,
    minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>Doraemon</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript">
        window.onload = function () {
            let pag = document.querySelectorAll('.package')[0];
            let img1 = document.querySelectorAll('.candy1')[0];
            let img2 = document.querySelectorAll('.candy2')[0];
            let txt1 = document.querySelectorAll('.Text1')[0];
            let txt2 = document.querySelectorAll('.Text2')[0];
            let time = 1;
            f1 = function () { txt1.style.display = 'inline'; }
            f2 = function () { txt1.style.display = 'none'; }
            function package_show() {
                if (time === 1) {
                    txt1.style.display = 'none';
                    img1.style.display = 'inline';
                    pag.removeEventListener('mouseenter', f1);
                    pag.removeEventListener('mouseleave', f2);
                } else if (time === 2) {
                    txt1.style.display = 'none';
                    img1.style.display = 'none';
                    img2.style.display = 'inline';
                } else if (time === 3) {
                    txt1.style.display = 'none';
                    img2.style.display = 'none';
                    txt2.style.display = 'inline';
                } else if (time === 4) {
                    time = 0;
                    txt2.style.display = 'none';
                    pag.addEventListener('mouseenter', f1);
                    pag.addEventListener('mouseleave', f2);
                };
                time++;
            }
            pag.addEventListener('click', package_show)
        }
    </script>
</head>

<body>
    <header class='blue-head'>
        <div class="face"></div>
        <div class="eyes">
            <div class="eye-left"></div>
            <div class="eye-right"></div>
        </div>
        <div class="nose"></div>
        <div class="mouth">
            <div class="line"></div>
            <div class="circle"></div>
        </div>
        <div class="moustache">
            <div class="moustache-left"></div>
            <div class="moustache-right"></div>
        </div>
    </header>
    <main class='D-body'>
        <div class="neck">
            <div class="ring">
                <div class="top"></div>
                <div class="middle"></div>
                <div class="down"></div>
            </div>
        </div>
        <div class="abdomen">
            <div class="subAbdomen"></div>
            <div class="package">
                <div class="Text1">点击有惊喜呦^~^!</div>
                <div class="Text2">一个也没有啦!</div>
                <img class='candy1' src="./images/candy1.png" alt="">
                <img class='candy2' src="./images/candy2.png" alt="">
            </div>
        </div>
        <div class="foot">
            <div class="footLeft"></div>
            <div class="footRight"></div>
        </div>
        <div class="arm">
            <div class="armLeft"></div>
            <div class="armRight"></div>
        </div>
        <div class="fist">
            <div class="fistRight"></div>
            <div class="fistLeft"></div>
        </div>
    </main>
</body>

</html>